<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>输入框和标签结合使用(input box and label combination handle)</title>
  <!-- 
    HTML和CSS中的输入框和标签（Input Box and Label）结合使用是为了提高表单的可访问性和用户体验。
    以下是关于HTML和CSS中输入框和标签组合处理的主要要点： 
 
      1. <input> 标签：使用 <input> 标签定义输入框，通过 type 属性指定输入框的类型，如文本框、密码框、复选框等。 
      2. <label> 标签：使用 <label> 标签定义标签，通过 for 属性与对应的输入框 id 属性关联，形成输入框和标签的关联， 
                       通过为标签的 for 属性指定与输入框的 id 属性相同的值，可以实现输入框和标签的关联，点击标签时焦点自动定位到对应的输入框。 
      9. form标签：
          1. <form> 标签：使用 <form> 标签定义表单，包裹表单中的各种表单元素，用于向服务器提交用户输入的数据。 
          2. 表单方法（Method）：通过 method 属性指定表单提交的方式，常见取值包括GET（数据附加在URL上）和POST（数据通过请求体发送）。 
          3. 表单动作（Action）：通过 action 属性指定表单提交的目标URL，数据将被发送到该URL处理。 
          4. 输入字段（Input Fields）：使用 <input> 标签创建文本框、密码框、单选框、复选框等输入字段，通过 type 属性指定输入字段类型。 
          5. 文本域（Text Area）：使用 <textarea> 标签创建多行文本输入框，用于用户输入多行文本信息，通过 cols="number" 设置列数，rows="number" 设置行数。 
          6. 按钮（Button）：使用 <button> 或 <input type="submit"> 创建提交按钮，用于提交表单数据。 
          7. 表单验证（Form Validation）：通过设置 required 属性和使用JavaScript等技术进行表单验证，确保用户输入的数据符合要求。 
          8. 文件上传（File Upload）：使用 <input type="file"> 创建文件上传字段，允许用户选择并上传文件。 
          9. 隐藏字段（Hidden Field）：使用 <input type="hidden"> 创建隐藏字段，用于在表单中传递数据而不显示给用户。 
          10. 下拉列表（Select）：
              0. 使用 <select> 和 <option> 标签创建下拉列表，用户可以从预定义的选项中进行选择
              1. <select> 标签：使用 <select> 标签定义下拉列表，用于提供用户选择的选项。 
              2. <option> 标签：使用 <option> 标签定义下拉列表中的选项，每个 <option> 标签代表一个选项。 
              3. 下拉列表结构： <select> 标签包裹多个 <option> 标签，用户可以通过下拉列表选择其中一个选项。 
              4. 选项值：通过 value 属性为每个 <option> 标签定义选项的值，这个值会在表单提交时被发送到服务器。 
              5. 选项文本： <option> 标签内的文本内容即为用户在下拉列表中看到的选项名称。 
              6. 默认选项：通过设置 selected 属性为某个 <option> 标签指定默认选中的选项。 
              7. 禁用选项：通过设置 disabled 属性为某个 <option> 标签禁用该选项，用户无法选择。 
              8. 多选下拉列表：通过设置 multiple 属性为 <select> 标签可以创建允许多选的下拉列表。 
        -->
</head>
<body>

  <form action="/user" method="post">
    <!-- 输入框 -->
    <div class="username">
      <label for="username">用户名: </label>
      <input type="text" id="username" name="username"/>
    </div>
    <div class="password">
      <label for="password">密码: </label>
      <input type="password" id="password" name="password"/>
    </div>
    <!--  单选框: input输入框type="radio"中, name一样会出现互斥的情况 -->
    <div class="radio">
      <label for="male">男</label>
      <input type="radio" id="male" name="gender" value="male" checked/>
      <label for="female">女</label>
      <input type="radio" id="female" name="gender" value="female"/>
    </div>
    <!-- 复选框 -->
    <div class="checkbox">
      爱好: 
      <label for="basketball">
        <input type="checkbox" id="basketball" name="hobby" value="basketball"/>
        篮球
      </label>
      <label for="football">
        <input type="checkbox" id="football" name="hobby" value="football"/>
        足球
      </label>
    </div>
    <!-- 选择框 -->
    <div class="select">
      <select name="fruites" id="" multiple size="4">
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="orange">橙子</option>
        <option value="grape">葡萄</option>
      </select>
    </div>
    <!-- 多行输入框 -->
    <label for="content">
      内容: 
      <textarea id="content" name="content" cols="10" rows="8"></textarea>
    </label>
    <button type="submit">提交按钮</button>
  </form>
  
</body>
</html>